<template>
  <view class="container">
    <view class="regular">
      <view class="regular_list">
        <view class="regular_list_title">城市区县：</view>
        <view class="regular_list_type"></view>
        <view class="regular_list_info">{{ partinfo.cityCounty }}</view>
      </view>
      <view class="regular_list">
        <view class="regular_list_title">水库名称：</view>
        <view class="regular_list_type"></view>
        <view class="regular_list_info">{{ partinfo.reservoirName }}</view>
      </view>
      <view class="regular_list">
        <view class="regular_list_title">开始时间：</view>
        <view class="regular_list_type"></view>
        <view class="regular_list_info">{{ partinfo.patrolStartTime }}</view>
      </view>
      <view class="regular_list">
        <view class="regular_list_title">结束时间：</view>
        <view class="regular_list_type"></view>
        <view class="regular_list_info">{{ baseinfo.endTime }}</view>
      </view>
      <view class="regular_list">
        <view class="regular_list_title">巡查时长：</view>
        <view class="regular_list_type"></view>
        <view class="regular_list_info">{{ baseinfo.inspectionDuration }}</view>
      </view>
      <view class="regular_list">
        <view class="regular_list_title">水库水位：</view>
        <view class="regular_list_type"></view>
       <view class="regular_list_info">{{ partinfo.reservoirWaterLevel }} m</view>
      </view>
      <view class="regular_list">
        <view class="regular_list_title">天气情况：</view>
        <view class="regular_list_type"></view>
        <view class="regular_list_info">{{ partinfo.weatherConditions }}</view>
      </view>
    </view>
    <uni-collapse :show-animation="true" accordion v-model="accordionVal" ref="collapse">
			<uni-collapse-item v-for="(ite, index) in blockinfo" :key="index" :title="ite.title">
				<view class="content">
          <view v-for="(item, index) in ite.list" :key="index" class="collapse_box">
            <view class="collapse_top">
              <view>{{ item.buildingsExplain }}</view>
            </view>
            <view class="collapse_mid">
              <uni-data-checkbox v-model="item.whetherStatus" :localdata="normal" :disabled="true"></uni-data-checkbox>
            </view>
            <view class="collapse_bot">
              <view class="divider">
                <view class="line"></view>
                <view class="text">描述详情</view>
                <view class="line"></view>
              </view>
              <uni-easyinput v-model="item.description" readonly :inputBorder="false" type="textarea" placeholder=""></uni-easyinput>
            </view>
            <view class="collapse_img">
              <image v-for="(item, index) in item.photoUrl" :key="index" :src="item" @click="preview(item)" mode="" />
            </view>
          </view>
        </view>
			</uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script>
  export default {
    // 跳转轨迹
    onNavigationBarButtonTap(e) {
      if(e.index == 0) {
        uni.navigateTo({ url: './track?id=' + this.id })
      }
    },
    data() {
      return {
        id: null,
        detailsId: null,
        time: null,
        placeholderStyle: "color:#ccc;font-size:30rpx",
				styles: {
					color: '#000',
					borderColor: 'transparent',
				},
        accordionVal: '',
        baseinfo: {},
        partinfo: {},
        normal: [
          { text: '不正常', value: 1 },
          { text: '正常', value: 0 },
        ],
        normalValue: 0,
        blockinfo: [],
      }
    },
    onLoad(options) {
      if(options) {
        this.id = options.id
        this.detailsId = options.detailsId
        this.getBaseinfo(options.id)
        this.getparticulars(options.detailsId)
        this.getbuildings(options.detailsId)
      }
    },
    methods: {
      // 基本信息
      getBaseinfo(id) {
        this.$request.reservoirBaseInfo({ reseId: id }).then(res => {
          this.baseinfo = res.data || {}
        })
      },
      // 获取详情信息
      getparticulars(id) {
        this.$request.getparticulars({ partId: id }).then(res => {
          let temp = res.data || {}
          this.partinfo = temp
        })
      },
      // 获取巡查详情巡查项状态
      getbuildings(id) {
        let blockinfo = [
          { title: '挡水建筑物', list: [] },
          { title: '泄水建筑物', list: [] },
          { title: '放水建筑物', list: [] },
          { title: '金属结构与电气设备', list: [] },
          { title: '道路与电力通信条件', list: [] },
          { title: '其他情况', list: [] },
        ]
        this.$request.getbuildings({ partId: id }).then(res => {
          let list = res.data || []
          list.forEach(item => {
            if(item.buildingsType == '挡水建筑物') {
              blockinfo[0].list.push(item)
            } else if(item.buildingsType == '泄水建筑物') {
              blockinfo[1].list.push(item)
            } else if(item.buildingsType == '放水建筑物') {
              blockinfo[2].list.push(item)
            } else if(item.buildingsType == '金属结构与电气设备') {
              blockinfo[3].list.push(item)
            } else if(item.buildingsType == '道路与电力通信条件') {
              blockinfo[4].list.push(item)
            } else if(item.buildingsType == '其他情况') {
              blockinfo[5].list.push(item)
            }
            if(item.photoVideoUrl) {
              item.photoUrl = []
              item.photoVideoUrl.split(',').forEach(v => {
                item.photoUrl.push(v)
              })
            }
          })
          this.blockinfo = JSON.parse(JSON.stringify(blockinfo));
        })
      },
      // 图片
      preview(url) {
        uni.previewImage({
          urls: [url], // 需要预览的图片链接列表
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .regular {
    padding: 15rpx 70rpx 15rpx 90rpx;

    .regular_list {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      line-height: 32rpx;
      padding: 20rpx 0;

      .regular_list_type {
        padding: 0 0rpx 0 20rpx;
        color: #ff435e;
      }

      .regular_list_info {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .regular_list_infobox {
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .uni-collapse {
    // max-height: 70vh;
    // overflow-y: auto;

    ::-webkit-scrollbar {
      display: none;
    }
  }

  .content {
    padding: 20rpx 50rpx;
    // background-color: #F6FAFF;
    border-top: 1px solid #ebeef5;

    .collapse_top {
      font-size: 28rpx;
      line-height: 35rpx;
    }

    .collapse_mid {
      font-size: 28rpx;
      color: #969696;
      padding: 20rpx 0;
      text-align: center;

      .uni-data-checklist {
        ::v-deep .checklist-group {
          justify-content: space-evenly;
        }
      }
    }

    .collapse_bot {
      .divider {
        display: flex;
        align-items: baseline;

        .line {
          flex: 1;
          // height: 2rpx;
          // background-color: #aeaeae;
          border: 2rpx dashed #aeaeae;
        }

        .text {
          font-size: 28rpx;
          line-height: 28rpx;
          color: #aeaeae;
          margin: 0 20rpx;
        }
      }

      .uni-easyinput {
        ::v-deep .uni-easyinput__content {
          // background-color: #F6FAFF !important;
        }
      }
    }

    .collapse_img {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      image {
        width: 25%;
        height: 150rpx;
      }
    }
  }
</style>
